import HelpCenter from '@/assets/json/help-center.json';
import IconUpgrade from '@/assets/json/upgrade.json';
import LottieIcon from '@/components/LottieIcon';
import { EditionType } from '@/constant/enums';
import { useAppSelector } from '@/store';
import { Box, Stack, Tooltip } from '@mui/material';
import { useEffect, useState } from 'react';
import packageJson from '../../../package.json';
import AuthTypeModal from './AuthTypeModal';
import freeVersion from '@/assets/images/free-version.png';
import enterpriseVersion from '@/assets/images/enterprise-version.png';
import contributorVersion from '@/assets/images/contributor-version.png';

// 版本信息配置 - 优雅的控制方式
const VERSION_CONFIG = {
  enabled: false, // 是否启用版本信息功能
  clickable: false, // 是否允许点击
  showUpgrade: false, // 是否显示升级提示
  showModal: false, // 是否显示弹窗
  opacity: 0.5, // 透明度 (1为正常，0.5为置灰)
  textColor: 'text.disabled' as const, // 文字颜色
  cursor: 'default' as const, // 鼠标样式
  grayscale: true, // 是否对图标去色
} as const;

const versionMap = {
  0: freeVersion,
  1: contributorVersion,
  2: enterpriseVersion,
};

const Version = () => {
  const { license } = useAppSelector(state => state.config);
  const curVersion = import.meta.env.VITE_APP_VERSION || packageJson.version;
  const [latestVersion, setLatestVersion] = useState<string | undefined>(
    undefined,
  );
  const [typeOpen, setTypeOpen] = useState(false);

  useEffect(() => {
    fetch('https://release.baizhi.cloud/panda-wiki/version.txt')
      .then(response => response.text())
      .then(data => {
        setLatestVersion(data);
      })
      .catch(error => {
        console.error(error);
        setLatestVersion('');
      });
  }, []);

  if (latestVersion === undefined) return null;

  return (
    <>
      <Stack
        justifyContent={'center'}
        gap={0.5}
        sx={{
          borderTop: '1px solid',
          borderColor: 'divider',
          pt: 2,
          mt: 1,
          cursor: VERSION_CONFIG.clickable ? 'pointer' : VERSION_CONFIG.cursor,
          color: VERSION_CONFIG.enabled
            ? 'text.primary'
            : VERSION_CONFIG.textColor,
          fontSize: 12,
          opacity: VERSION_CONFIG.enabled ? 1 : VERSION_CONFIG.opacity,
          pointerEvents: VERSION_CONFIG.clickable ? 'auto' : 'none',
          transition: 'all 0.3s ease', // 添加过渡动画
        }}
        onClick={VERSION_CONFIG.clickable ? () => setTypeOpen(true) : undefined}
      >
        <Stack direction={'row'} alignItems='center' gap={0.5}>
          <Box
            sx={{
              width: 30,
              color: VERSION_CONFIG.enabled
                ? 'text.auxiliary'
                : VERSION_CONFIG.textColor,
            }}
          >
            型号
          </Box>
          <img
            src={versionMap[license.edition ?? 0]}
            style={{
              height: 13,
              marginTop: -1,
              opacity: VERSION_CONFIG.enabled ? 1 : VERSION_CONFIG.opacity,
              filter:
                VERSION_CONFIG.grayscale && !VERSION_CONFIG.enabled
                  ? 'grayscale(100%)'
                  : 'none',
            }}
          />
          <Box
            sx={{
              color: VERSION_CONFIG.enabled
                ? 'text.primary'
                : VERSION_CONFIG.textColor,
            }}
          >
            {EditionType[license.edition as keyof typeof EditionType].text}
          </Box>
        </Stack>
        <Stack direction={'row'} gap={0.5} alignItems='center'>
          <Box
            sx={{
              width: 30,
              color: VERSION_CONFIG.enabled
                ? 'text.auxiliary'
                : VERSION_CONFIG.textColor,
            }}
          >
            版本
          </Box>
          <Box
            sx={{
              whiteSpace: 'nowrap',
              color: VERSION_CONFIG.enabled
                ? 'text.primary'
                : VERSION_CONFIG.textColor,
            }}
          >
            {curVersion}
          </Box>
          {VERSION_CONFIG.showUpgrade && latestVersion !== `v${curVersion}` && (
            <Tooltip
              placement='top'
              arrow
              title={
                latestVersion === ''
                  ? '无法获取最新版本'
                  : '检测到新版本，点击查看'
              }
            >
              <Box
                sx={{
                  opacity: VERSION_CONFIG.enabled ? 1 : VERSION_CONFIG.opacity,
                }}
              >
                <LottieIcon
                  id='version'
                  src={latestVersion === '' ? HelpCenter : IconUpgrade}
                  style={{ width: 16, height: 16 }}
                />
              </Box>
            </Tooltip>
          )}
        </Stack>
      </Stack>
      {VERSION_CONFIG.showModal && (
        <AuthTypeModal
          open={typeOpen}
          onClose={() => setTypeOpen(false)}
          latestVersion={latestVersion}
          curVersion={curVersion}
        />
      )}
    </>
  );
};

export default Version;
